<template>
  <div id="Service">
    <div class="container text-center">
      <h3>华南理工大学产研结合</h3>
    </div>
    <div class="container">
      <!-- <div class="row">
        <div id="left" class="col-md-4 col-xs-12">
        <ul class="left-container wow bounceInLeft">
          <p>华南理工大学产研结合</p>
          <li v-for="(item, index) in softwareList" :key="index">
            <router-link :to="item.path">{{ item.name }}</router-link>
          </li>
        </ul>
      </div>
      </div> -->

      <div class="Service-container row">


        <div class="Service-item col-xs-12 col-sm-6 col-md-3 wow slideInUp" v-for="(item, index) in serviceList"
          :key="index" @click="ServiceClick(item.page)">
          <div class="Service-item-wrapper">
            <div class="Service-item-top">
              <h4>{{ item.title }}</h4>
              <i></i>
              <p>{{ item.eng_title }}</p>
            </div>
            <div class="Service-item-img">
              <img :src="item.img" alt="服务" />
            </div>
            <div class="Service-item-border"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup name="Service">
// import  promptPassword   from '@/utils/promptPassword.js'
import { useRouter } from 'vue-router'
import { onMounted } from 'vue'
import WOW from 'wow.js'
import service1 from '@/assets/img/service1-robothand.jpg'
import service2 from '@/assets/img/service2-humanbody.jpg'
import service3 from '@/assets/img/service3-weixing.jpg'
import service4 from '@/assets/img/service4-kejixing.jpg'
const serviceList = [
  {
    id: 'section-1',
    title: '技术创新与研发',
    eng_title: 'Technological Innovation and Research',
    img: service1,
    page: 1
  },
  {
    id: 'section-2',
    title: '临床应用的成功案例',
    eng_title: 'Successful cases of clinical application',
    img: service2,
    page: 2
  },
  {
    id: 'section-3',
    title: '远程诊疗的突破',
    eng_title: 'Remote diagnosis and treatment',
    img: service3,
    page: 3
  },
  {
    id: 'section-4',
    title: '提高医疗服务可及性',
    eng_title: 'Improve accessibility of medical services',
    img: service4,
    page: 4
  }
]

const softwareList = [
  {
    name: '技术创新与研发',
    path: '/InnovationDetail1'
  },
  {
    name: '临床应用的成功案例',
    path: '/InnovationDetail2'
  },
  {
    name: '远程诊疗的突破',
    path: '/InnovationDetail3'
  },
  {
    name: '提高医疗服务可及性',
    path: '/InnovationDetail4'
  },
]


// const router = useRouter()

// function ServiceClick(id) {
//   router.push({
//     name: 'serviceDetail',
//     state: {
//       id
//     }
//   })
// }
function ServiceClick(page) {
  router.push(`/InnovationDetail${page}`)
}
onMounted(() => {
  var wow = new WOW()
  wow.init()
})
</script>
<style scoped>
#left {
  margin: 50px 0;
  display: none;
}

.left-container {
  width: 60%;
  margin: 0 auto;
  border: 1px solid #474747;
  border-radius: 5px;
}

.left-container>p {
  text-align: center;
  line-height: 45px;
  padding: 0;
  margin: 0;
  background: #474747;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
}

.left-container>li {
  text-align: center;
  height: 38px;
  line-height: 38px;
  margin: 0;
  border-top: 1px solid #474747;
}

.left-container>li>a {
  text-decoration: none;
}

.left-container>li:hover {
  background: #928989;
}

#right {
  padding: 50px 0;
}

@media screen and (max-width: 768px) {
  #right {
    padding: 15px;
  }

  #left {
    display: block;
  }

  .text-center {
    display: none;
  }
}

.Service-container {
  padding: 30px 50px;
}

.Service-item {
  margin-bottom: 50px;
}

.Service-item-wrapper {
  cursor: pointer;
  background: rgba(244, 244, 244, 1);
  overflow: hidden;
  position: relative;
}

.Service-item-top {
  width: 100%;
  height: 120px;
  padding: 30px;
  text-align: center;
}

.Service-item-top>i {
  display: inline-block;
  width: 25px;
  height: 2px;
  background: #28f;
}

.Service-item-top>p {
  color: #b2b2b2;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.5s ease;
}

.Service-item-img {
  width: 100%;
  overflow: hidden;
}

.Service-item-img img {
  width: 100%;
  transition: all 0.5s ease;
}

.Service-item-border {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  z-index: 9999999;
  width: 100%;
  height: 100%;
  transition: all 0.5s ease;
  border: 1px solid #000;
  opacity: 0;
}

.Service-item-wrapper:hover .Service-item-top>i {
  opacity: 0;
}

.Service-item-wrapper:hover .Service-item-top>p {
  opacity: 1;
  transform: translateY(-10px);
}

.Service-item-wrapper:hover .Service-item-img>img {
  transform: scale(1.1, 1.1);
}

.Service-item-wrapper:hover>.Service-item-border {
  opacity: 1;
  width: 90%;
  height: 90%;
}

.Service-item-wrapper:hover {
  /* box-shadow: 2px 4px 24px 0 #a5a3a3; */
  box-shadow: 6px 6px 24px 6px #a5a3a3;
}
</style>
